<!-- 客户发送短信形式 -->
<template>
  <el-container>
    <el-header>
      <el-row class="navbar" :gutter="20">
        <el-col :span="12" :offset="0" align="left" justify="center">
          <el-image :src="logo" />
        </el-col>
        <el-col :span="12" :offset="0" align="right">
          <el-button link @click="goBack">登录</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-card class="box-card">
        <el-row class="title">找回密码 </el-row>
        <el-form v-if="step == 1" ref="formInlineRef" :model="formInline" size="large" :rules="rules">
          <el-form-item prop="account">
            <el-input v-model="formInline.account" placeholder="请输入账号" clearable @input="onAccountChange" />
            <div v-if="!isFirst && formInline.account.length > 0" class="account-icon">
              <el-text v-if="!verifyLoading && userTypes.length > 0" type="success"
                ><CircleCheck width="20px"
              /></el-text>
              <el-tooltip v-if="!verifyLoading && userTypes.length == 0" content="该账号不存在" placement="left">
                <el-text type="danger"><CircleClose width="20px" /></el-text>
              </el-tooltip>
              <el-text v-if="verifyLoading" type="info"><Loading width="20px" class="rotate-out-center" /></el-text>
            </div>
          </el-form-item>
          <el-form-item v-if="userTypes.length > 1" prop="userType">
            <el-select v-model="formInline.userType" placeholder="请选择" clearable @change="changeUserType">
              <el-option v-for="item in userTypes" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button v-loading="nextStepLoading" type="primary" @click="nextStep">下一步</el-button>
          </el-form-item>
        </el-form>
        <el-row v-if="step == 2">
          <el-col :span="24" :offset="0">
            <el-row class="sms-tips">请使用手机{{ formInline.mobile }}编辑以下内容发送短信到10086</el-row>
            <el-row class="sms-tips"
              >内容：<span> {{ formInline.verifyCode }}</span>
              <el-button
                v-copy="formInline.verifyCode"
                type="primary"
                style="display: inline-block; width: 50px; height: 20px"
                link
                >复制</el-button
              ></el-row
            >
            <el-row>
              <el-button type="success" @click="nextStep">我已发送短信</el-button>
            </el-row>
          </el-col>
        </el-row>
        <el-row v-if="step == 3">
          <el-col :span="24" :offset="0">
            <el-result>
              <template #icon>
                <el-text v-if="verifySmsStatus == 'waiting'" type="primary" width="50px">
                  <Loading class="rotate-out-center" style="width: 50px"
                /></el-text>
                <el-text v-if="verifySmsStatus == 'success'" type="success" width="50px">
                  <CircleCheck style="width: 50px"
                /></el-text>
                <el-text v-if="verifySmsStatus == 'fail'" type="danger" width="50px">
                  <CircleClose style="width: 50px"
                /></el-text>
              </template>
              <template #title>
                <el-text v-if="verifySmsStatus == 'waiting'" type="primary" width="50px"> 正在验证短信...</el-text>
                <el-text v-if="verifySmsStatus == 'success'" type="success" width="50px">
                  短信验证成功,进入下一步...</el-text
                >
                <el-text v-if="verifySmsStatus == 'fail'" type="danger" width="50px">
                  短信验证失败{{ errorMsg }}</el-text
                >
              </template>
              <template #extra>
                <el-button v-if="verifySmsStatus == 'fail'" type="primary" @click="step = 1">返回上一步</el-button>
              </template>
            </el-result></el-col
          >
        </el-row>
        <el-form v-if="step == 4" ref="passwordFormRef" :model="passwordForm" size="large" :rules="rules">
          <el-form-item prop="password">
            <el-input v-model="passwordForm.password" type="password" placeholder="请输入密码" @input="verifyPassWord">
            </el-input>
            <div class="password-icon">
              <el-text v-if="percentage > 33 && !verifyLoading" type="success"><CircleCheck width="16px" /></el-text>
              <el-text v-if="percentage == 33 && !verifyLoading" type="danger"><CircleClose width="16px" /></el-text>
              <el-text v-if="verifyLoading" type="info"><Loading width="16px" /></el-text>
            </div>
            <div class="password-progress">
              <el-progress v-if="percentage > 0" :percentage="percentage" :status="status">
                <template #default>
                  <span>{{ format }}</span>
                </template>
              </el-progress>
            </div>
            <div class="password-tips">
              <el-text type="danger" style="font-size: 12px; display: block; line-height: 16px"
                >要求:1.密码长度最少为6位</el-text
              >
              <el-text type="danger" style="font-size: 12px; display: block; line-height: 16px"
                >&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.密码必须包含数字+大小写或特殊字符</el-text
              >
            </div>
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="请输入确认密码" />
          </el-form-item>
          <el-form-item>
            <el-button v-loading="nextStepLoading" type="primary" @click="nextStep">确认修改</el-button>
          </el-form-item>
        </el-form>
        <el-row v-if="step == 5">
          <el-col :span="24" :offset="0">
            <el-result icon="success" title="修改成功" :sub-title="'即将返回登录页...(' + countdown + ')'">
              <template #extra>
                <el-button type="primary" @click="goBack">立即登录</el-button>
              </template>
            </el-result></el-col
          >
        </el-row>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
const logo = ref(new URL(`../../../assets/back/logo.png`, import.meta.url).href);
import { useRouter } from "vue-router";
import { VerifyUserName, GetRetrievePasswordToken, GetSMSSendStatus, SubmitRetrievePassword } from "@/api/auth";
import { Loading, CircleCheck, CircleClose } from "@element-plus/icons-vue";
import { PassWordStrengthVerify } from "@/api/common/other/index";
import { dataTool } from "echarts";
import { userInfo } from "os";
import { error } from "console";
const router = useRouter();
const formInline = ref({
  account: "",
  userType: "",
  verifyCode: "",
  mobile: "",
});
const verifyLoading = ref(false);
const userTypes = ref<any[]>([]);
const isFirst = ref(true);
const formInlineRef = ref();
const nextStepLoading = ref(false);
const step = ref(1);
const errorMsg = ref("");
const passwordForm = ref({
  account: "",
  userType: "",
  password: "",
  confirmPassword: "",
  token: "",
});
const allowPassword = ref(false);
const passwordFormRef = ref();
const verifySmsStatus = ref("waiting"); //waiting success fail
const countdown = ref(3);

const rules = ref({
  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
  userType: [{ required: true, message: "请选择账号类型", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  confirmPassword: [
    { required: true, message: "请输入确认密码", trigger: "blur" },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value !== passwordForm.value.password) {
          callback(new Error("两次密码不一致"));
        } else {
          callback();
        }
      },
    },
  ],
});

const percentage = ref<number>(0);
const format = ref<string>("密码强度：弱");
const status = ref<string>("exception");

//返回上一页
const goBack = () => {
  router.go(-1);
};

//改变选择角色事件
const changeUserType = (value: any) => {
  let temp = userTypes.value.find((i) => i.value == value);
  if (!temp) return;
  formInline.value.userType = temp.value;
  formInline.value.verifyCode = temp.extend2;
  formInline.value.mobile = temp.extend1;
};

//输入账号改变事件
const onAccountChange = () => {
  if (formInline.value.account.length < 18) return;
  if (isFirst.value) {
    isFirst.value = false;
  }
  verifyLoading.value = true;
  formInline.value.userType = "";
  nextStepLoading.value = true;
  VerifyUserName(formInline.value.account)
    .then((res) => {
      if (res.success) {
        userTypes.value = res.data;
        if (userTypes.value.length > 0) {
          formInline.value.userType = userTypes.value[0].value;
          formInline.value.mobile = userTypes.value[0].extend1;
          formInline.value.verifyCode = userTypes.value[0].extend2;
        }
      }
    })
    .finally(() => {
      verifyLoading.value = false;
      nextStepLoading.value = false;
    });
};
//处理结果
const handleResult = () => {
  setTimeout(() => {
    if (countdown.value == 1) {
      goBack();
    }
    countdown.value--;
    handleResult();
  }, 1000);
};

//验证密码强度
const verifyPassWord = (value: string) => {
  passwordForm.value.password = value.replace(/[\s]/g, "");
  if (value == "") {
    percentage.value = 0;
    return;
  }
  verifyLoading.value = true;
  PassWordStrengthVerify(passwordForm.value.password).then((res: any) => {
    verifyLoading.value = false;
    if (res.success) {
      if (res.data == 0) {
        allowPassword.value = false;
        percentage.value = 33;
        format.value = "密码强度：弱";
        status.value = "exception";
      }
      if (res.data == 1) {
        allowPassword.value = true;
        percentage.value = 66;
        format.value = "密码强度：中";
        status.value = "warning";
      }
      if (res.data == 2) {
        allowPassword.value = true;
        percentage.value = 100;
        format.value = "密码强度：强";
        status.value = "success";
      }
    }
  });
};

//下一步
const nextStep = () => {
  if (step.value == 1) {
    if (formInline.value.userType == "") {
      return ElMessage({
        message: "请输入正确的账号",
        type: "error",
      });
    }
    formInlineRef.value.validate((valid: boolean) => {
      if (valid) {
        nextStepLoading.value = true;
        GetRetrievePasswordToken(formInline.value.userType, formInline.value.account)
          .then((res) => {
            if (res.success) {
              passwordForm.value.token = res.data;
              verifySmsStatus.value = "waiting";
              step.value++;
            }
          })
          .finally(() => {
            nextStepLoading.value = false;
          });
      }
    });
  }
  if (step.value == 2) {
    step.value++;
    GetSMSSendStatus(passwordForm.value.token).then((res) => {
      if (res.success) {
        verifySmsStatus.value = "success";
        setTimeout(() => {
          step.value++;
        }, 1000);
      } else {
        verifySmsStatus.value = "fail";
        errorMsg.value = res.msg;
      }
    });
    return;
  }
  if (step.value == 4) {
    if (!allowPassword.value) return;
    passwordFormRef.value.validate((valid: boolean) => {
      if (valid) {
        nextStepLoading.value = true;
        SubmitRetrievePassword(passwordForm.value.token, passwordForm.value.password)
          .then((res) => {
            if (res.success) {
              step.value++;
              handleResult();
            }
          })
          .finally(() => {
            nextStepLoading.value = false;
          });
      }
    });
    return;
  }
};
</script>

<style lang="scss" scoped>
@-webkit-keyframes rotate-out-center {
  0% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes rotate-out-center {
  0% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
.rotate-out-center {
  -webkit-animation: rotate-out-center 2s ease infinite both;
  animation: rotate-out-center 2s linear infinite both;
}

:deep(.el-row) {
  padding: 15px;
}
:deep(.navbar) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  //height: 50px;
  height: 90px;
  // background-color: rgba(31,41,55);
  //background-color: black;
  background-color: #3b98f7;
  // --menuBg: rgb(17 17 18);
  //box-shadow: 0 0 1px #0003;
  box-shadow: 0px 20px 40px rgba(255, 255, 255, 0.9);
  color: #fff;
}

:deep(.navbar .el-button span) {
  font-size: 20px;
  color: #fff;
}
:deep(.box-card) {
  width: 500px;
  margin: 0 auto;
  margin-top: 15vh;
  padding: 50px;
}
:deep(.box-card .title) {
  border-left: 5px solid #3b98f7;
  margin-left: 50px;
  text-indent: 1em;
  line-height: 15px;
  font-weight: 600;

  padding: 5px;
}
:deep(.box-card .sms-tips) {
  margin-left: 40px;
  text-indent: 1em;
  line-height: 20px;
  font-size: 16px;
  font-weight: 600;
  padding: 5px;
}
:deep(.el-form) {
  margin-top: 20px;
}
:deep(.el-input) {
  width: 250px;
  margin: 0 auto;
  height: 45px;
}
:deep(.el-input input) {
  font-size: 16px;
}

:deep(.el-select) {
  width: 250px;
  margin: 0 auto;
  height: 40px;
}
:deep(.el-button) {
  width: 250px;
  margin: 0 auto;
  height: 40px;
}
:deep(.account-icon) {
  position: absolute;
  right: 35px;
}
:deep(.password-icon) {
  position: absolute;
  right: 35px;
  top: 0;
}
:deep(.el-form-item__error) {
  margin-left: 70px;
}
:deep(.password-tips) {
  margin-left: 70px;
}
:deep(.password-progress) {
  margin-top: 5px;
  margin-left: 70px;
  width: 100%;
}
</style>
